

Star Vault is an immersive 3D interactive space built using React Three Fiber and an unhealthy amount of maths. It renders multiple galaxies, each of which you can upload a memory to using a form, after which you can view as a memory inside a galaxy.
This is built with a CRUD design system, allowing users to edit, delete, create and view each of their memories. The codebase along with the final project is something that I am really proud of, especially considering it is something that expanded my toolkit apart from 2D web development.
| Challenges | Solutions |
|---|---|
| 3D Rendering Performance | Optimized Three.js scene with efficient geometry and texture management to maintain smooth 60fps |
| Complex Mathematical Positioning | Implemented spherical coordinate systems and custom algorithms to position stars naturally within galaxy formations |
| Camera Controls & Navigation | Developed smooth camera transitions using React Three Spring for intuitive 3D space exploration |
| State Management in 3D Space | Integrated CRUD operations with Local Storage while synchronizing 2D UI forms with 3D object representations |
| User Experience Clarity | Added tooltips and visual cues to guide users through the 3D interface, though this remains an area for improvement |
Optimized 3D rendering pipeline, lazy loading components, and efficient React Three Fiber scene management
Semantic HTML elements, proper ARIA labels, and keyboard navigation support for 3D interactions
Clean component architecture, optimized assets, responsive design across all devices
Comprehensive metadata, Open Graph tags, Twitter cards, and descriptive alt text for images

Building Star Vault pushed me beyond traditional 2D web development into the realm of 3D interactive experiences. I gained deep knowledge of React Three Fiber, Three.js fundamentals, complex mathematical positioning systems, and the challenges of maintaining performance in browser-based 3D environments. Most importantly, I learned to balance technical complexity with user experience, recognizing that innovative technology must still be accessible and intuitive for users.